<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<link rel="stylesheet" href="../css/register.css" />
	</head>
	<body>
		<!--
        	作者：318990114@qq.com
        	时间：2017-12-23
        	描述：header
        -->
        <div id="headerbox">
	        <div id="header">
	        	<h1><a href="../index.html"><img src="../img/logo.png" alt="" /></a></h1>
	        	<span>注册</span>
	        </div>
	    </div>
	    <!--
        	作者：318990114@qq.com
        	时间：2018-01-02
        	描述：content
        -->
        <div id="contentbox">
        	<div id="content">
        		<div id="window">
        			注册成功！ 去<a href="login.html">登录</a>
        		</div>
        		<h1>我已经注册，现在就<a href="login.html">登录</a></h1>
        		<form action="">
        			<img src="../img/register.png" alt="" />
        			<h2>
        				<span>图形验证码</span>
        				<input type="text" placeholder="图形验证码" class="input"/>
        				<div id="box"></div>
						<input type="button" id="button1" value="换一张" />
						<i>图形验证码错误</i>
        			</h2>
        			<h2><span>手机号</span><input type="text" placeholder="请输入您的手机号" class="input"/><i>手机号输入有误</i></h2>
        			<h2>
        				<span>手机验证码</span>
        				<input type="text" placeholder="手机验证码" class="input"/>
        				<button type="button">获取验证码</button>
        				<i>验证码输入错误</i>
        			</h2>
        			<h2><span>设置密码</span><input type="password" placeholder="6-20位字母、符号或数字"/ class="input"><i>密码输入有误</i></h2>
        			<h2><span>确认密码</span><input type="password" placeholder="再次输入密码" class="input"/><i>两次密码不一致</i></h2>
        			<h2><span>邀请码</span><input type="text" placeholder="邀请码" class="input"/></h2>
        			<h2><span></span><input type="checkbox" checked="checked" class="input"/><p>我已阅读并同意<a href="#">《易果服务协议》</a></p><i>请接收服务协议</i></h2>
        			<button id="submit" type="button" >立即注册</button>
        		</form>
        	</div>
        </div>
	     <!--
        	作者：318990114@qq.com
        	时间：2017-12-27
        	描述：footer
        -->
        <div id="footerbox">
        	<div id="footer">
        		<div>
        			<h3>新手指南</h3>
        			<ul>
        				<li><a href="#">账户注册</a></li>
        				<li><a href="#">购物流程</a></li>
        				<li><a href="#">订购方式</a></li>
        				<li><a href="#">悠币说明</a></li>
        				<li><a href="#">会员等级</a></li>
        			</ul>
        		</div>
        		<div>
        			<h3>付款方式</h3>
        			<ul>
        				<li><a href="#">支付方式</a>/<a href="#">发票说明</a></li>
        				<li><a href="#">充值说明</a>/<a href="#">储值卡说明</a></li>
        				<li><a href="#">优惠代码</a>/<a href="#">礼品卡说明</a></li>
        				<li><a href="#">卡券购买章程</a></li>
        			</ul>
        		</div>
        		<div>
        			<h3>配送方式</h3>
        			<ul>
        				<li><a href="#">配送运费</a></li>
        				<li><a href="#">配送范围</a></li>
        				<li><a href="#">配送时间</a></li>
        			</ul>
        		</div>
        		<div>
        			<h3>售后服务</h3>
        			<ul>
        				<li><a href="#">退换货政策</a></li>
        				<li><a href="#">退换货流程</a></li>
        				<li><a href="#">常见问题</a></li>
        				<li><a href="#">极速退款</a></li>
        				<li><a href="#">投诉与建议</a></li>
        			</ul>
        		</div>
        		<div>
        			<h3>关于我们</h3>
        			<ul>
        				<li><a href="#">公司介绍</a></li>
        				<li><a href="#">联系我们</a></li>
        				<li><a href="#">业务合作</a></li>
        				<li><a href="#">诚信举报</a></li>
        				<li><a href="#">人才招聘</a></li>
        				<li><a href="#">友情链接</a></li>
        			</ul>
        		</div>
        		<h1>客服热线 400-000-7788 企业采购或团购，请转2号键咨询&nbsp;&nbsp;&nbsp;&nbsp;周一至周日 9:00-21:00</h1>
        		<h2>所有图片均受著作权保护，未经许可任何单位与个人不得使用、复制、转载、摘编，违者必究法律责任。</h2>
        		<h2><a href="#">沪ICP备09008015号</a>&nbsp;Copyright &copy; 2005-2017&nbsp;<a href="#">上海易果电子商务有限公司</a>版权所有</h2>
        		<h4>
        			<a href="#"><img src="../img/footer1.png" alt="" /></a>
        			<a href="#"><img src="../img/footer2.png" alt="" /></a>
        			<a href="#"><img src="../img/footer3.gif" alt="" /></a>
        			<a href="#"><img src="../img/footer4.png" alt="" />沪公网安备 31010502000002号</a>
        		</h4>
        	</div>
        </div>
	</body>
	<script>
		//设计一个4个数的随机验证码
		var oButton = document.getElementById("button1");
		var oBox = document.getElementById("box");
		var oSubmit = document.getElementById("submit");
		authCode();
		oButton.onclick = function(){
			authCode();
		}
		function authCode(){
			var str = " ";
			for(var i = 1;i < 5;i ++){
				str += Math.floor(Math.random() * 10);
			 }
			oBox.innerHTML = str;
		}
		var oIput = document.getElementsByClassName("input");
		for(var i = 0;i < oIput.length - 1;i ++){
			oIput[i].onfocus = function(){
				this.style.boxShadow = "0 0 0 3px #b1d6ff";
			}
		}
		var oI = document.querySelectorAll("i");
		oIput[0].onblur =function(){
			this.style.boxShadow = "none";
			if(this.value == oBox.innerHTML){
				oI[0].style.visibility = "hidden";
			}else{
				oI[0].style.visibility = "visible";
			}
		}
		oIput[1].onblur =function(){
			this.style.boxShadow = "none";
			if(/^\d{11}$/.test(this.value) != "0"){
				oI[1].style.visibility = "hidden";
			}else{
				oI[1].style.visibility = "visible";
			}
		}
		oIput[2].onblur =function(){
			this.style.boxShadow = "none";
		}
		oIput[3].onblur =function(){
			this.style.boxShadow = "none";
			if(/^[\w,\.*]{6,20}$/.test(this.value) != "0"){
				oI[3].style.visibility = "hidden";
			}else{
				oI[3].style.visibility = "visible";
			}
		}
		oIput[4].onblur =function(){
			this.style.boxShadow = "none";
			if(this.value == oIput[3].value){
				oI[4].style.visibility = "hidden";
			}else{
				oI[4].style.visibility = "visible";
			}
		}
		oIput[5].onblur =function(){
			this.style.boxShadow = "none";
		}
		oIput[6].onblur =function(){
			if(this.checked){
				oI[5].style.visibility = "hidden";
				oSubmit.style.background = "#008842";
			}else{
				oI[5].style.visibility = "visible";
				oSubmit.style.background = "#808080";
			}
		}
		oSubmit.onclick = function(){
			if(oIput[1].value != 0 && oIput[3].value != 0 && oIput[4].value != 0 && oI[1].style.visibility == "hidden" && oI[3].style.visibility == "hidden" && oI[4].style.visibility == "hidden"){
				document.cookie = "user" + (new Date()).getTime() + '={"user":"' + oIput[1].value + '","pwd":"' + oIput[3].value + '"};expires=7;path=/';
				document.getElementById("window").style.display = "block";
			}
		}
	</script>
</html>
